<template>
    <div class="helper">
        <span class="left">{{unCompleteTodoLength}} items left</span>
        <span class="state">
            <span
            v-for="(state,index) in states"
            :key="index"
            :class="['state-item',filter==state ? 'active':'']"
            @click="toggleFilter(state)">
            {{state}}
            </span>
        </span>
        <span class="clear" @click="clearAllComplete">Clear Completed</span>
    </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true
    },
    filter: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      states: ['all', 'active', 'completed']
    }
  },
  computed: {
    unCompleteTodoLength () {
      return this.todos.filter(todo => !todo.completed).length
    }
  },
  methods: {
    toggleFilter (state) {
      this.$emit('setState', state)
    },
    clearAllComplete () {
      this.$emit('clearAllComplete')
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
    background: #ccc;
    border: 1px solid #999;
}
.clear {
    float: right;
    cursor: pointer;
}
.helper {
    padding: 10px;
    text-align: center;
    .state-item {
        cursor: pointer;
        border-radius: 6px;
        margin-left: 20px;
        padding:5px 10px;
    }
    .left {
        float: left;
    }
}
</style>
